<p>A mobile <strong>Layout</strong> is used to share headers and footers between multiple <strong>Views</strong>.
The header and/or footer element of the <strong>Layout</strong> are applied to any <strong>View</strong> that uses it.</p>

<p>To define a <strong>Layout</strong> set <code>data-role="layout"</code> to an element.
To associate a <strong>View</strong> to a <strong>Layout</strong> set <code>data-layout</code> attribute. Once
instantiated, the layout detaches its element from the DOM. When a view with the given layout is displayed,
the layout attaches its header and footer to it.</p>

<p>A <strong>View</strong> is associated with a <strong>Layout</strong> by setting its <code>data-layout</code> attribute value
to the value of the layout's <code>data-id</code> attribute:</p><div class="code-sample"><h4 class="code-title">Views with Layout</h4><pre class="code prettyprint"><code>&lt;div data-role="view" data-layout="foo"&gt;Foo&lt;/div&gt;
&lt;div data-role="view" data-layout="foo"&gt;Bar&lt;/div&gt;

&lt;div data-role="layout" data-id="foo"&gt;
  &lt;div data-role="header"&gt;Header&lt;/div&gt;
  &lt;div data-role="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;</code></pre></div><p>A default <strong>Application</strong> layout can be set by passing the layout id in the <code>options</code> parameter of the <strong>Application</strong>'s constructor.
A mobile <strong>View</strong> can remove the default application <strong>Layout</strong> by setting <code>data-layout=""</code>.</p><div class="code-sample"><h4 class="code-title">Default Application Layout</h4><pre class="code prettyprint"><code>&lt;div data-role="view"&gt;Bar&lt;/div&gt;

&lt;div data-role="layout" data-id="foo"&gt;
  &lt;div data-role="header"&gt;Header&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
   new kendo.mobile.Application($(document.body), { layout: "foo" });
&lt;/script&gt;</code></pre></div><p>Layouts can be platform specific, allowing for different layout and behavior per platform.
A layout platform can be specified using <code>data-platform=""</code></p><div class="code-sample"><h4 class="code-title">iOS and Android Application Layout</h4><pre class="code prettyprint"><code>&lt;div data-role="view"&gt;Bar&lt;/div&gt;

&lt;div data-role="layout" data-id="foo" data-platform="ios"&gt;
  &lt;div data-role="header"&gt;Header&lt;/div&gt;
&lt;/div&gt;

&lt;div data-role="layout" data-id="foo" data-platform="android"&gt;
  &lt;div data-role="header"&gt;Header&lt;/div&gt;
&lt;/div&gt;</code></pre></div><h3>Layout DOM elements</h3>
<p>Each mobile Layout instance exposes the following fields:</p>
<ul>
 <li><b>header</b> - the header DOM element;</li>
 <li><b>footer</b> - the footer DOM element;</li>
</ul>
